<template>
  <view class="record-page">
    <!-- 顶部导航 -->
    <uni-nav-bar 
      title="预约挂号订单" 
      left-icon="back" 
      @clickLeft="handleBack"
    ></uni-nav-bar>

    <!-- 当前患者信息 -->
    <view class="patient-info" v-if="currentPatient">
      <view class="info-left">
        <text class="name">{{ currentPatient.name }}</text>
        <text class="meta">{{ currentPatient.gender }} - {{ currentPatient.age }}岁</text>
      </view>
      <text class="change-btn" @click="handleChangePatient">切换患者</text>
    </view>

    <!-- 预约挂号订单列表 -->
    <scroll-view 
      class="record-list"
      scroll-y
    >
      <view 
        class="record-item"
        v-for="(item, index) in appointmentOrders"
        :key="item.id"
      >
        <view class="header">
          <text class="department">{{ item.department }}</text>
          <text class="date">{{ formatDate(item.date) }}</text>
        </view>
        <view class="content">
          <view class="info-line">
            <uni-icons type="contact" size="16"></uni-icons>
            <text>医生：{{ item.doctor }} {{ item.doctor_title || '' }}</text>
          </view>
          <view class="info-line">
            <uni-icons type="time" size="16"></uni-icons>
            <text>预约时间：{{ item.time }}</text>
          </view>
          <view class="info-line">
            <uni-icons type="person" size="16"></uni-icons>
            <text>就诊人：{{ item.patient_name }}</text>
          </view>
          <view class="info-line">
            <uni-icons type="phone" size="16"></uni-icons>
            <text>联系电话：{{ item.patient_phone }}</text>
          </view>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-status">
        <text v-if="loading">加载中...</text>
        <text v-else-if="appointmentOrders.length === 0">暂无预约订单</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import api from '@/api/index.js'

export default {
  data() {
    return {
      currentPatient: null,
      appointmentOrders: [], // 预约挂号订单列表
      loading: false
    }
  },
  methods: {
    // 加载当前患者信息
    loadCurrentPatient() {
      const patient = uni.getStorageSync('currentPatient');
      if (!patient) {
        const patients = uni.getStorageSync('patients') || [];
        this.currentPatient = patients.find(p => p.isDefault) || patients[0];
      } else {
        this.currentPatient = patient;
      }
    },
    
    // 格式化日期函数，去除ISO格式中的时间部分
    formatDate(dateString) {
      if (!dateString) return '';
      // 检查是否为ISO格式日期（包含T）
      if (dateString.includes('T')) {
        // 截取T前面的日期部分
        return dateString.split('T')[0];
      }
      return dateString;
    },
    
    // 加载预约挂号订单列表（一次性获取所有数据）
    async loadAllAppointmentOrders() {
      if (this.loading) {
        console.log('正在加载数据，请勿重复请求');
        return;
      }
      
      console.log('开始加载所有预约挂号订单数据');
      this.loading = true;
      try {
        // 调用API获取所有预约挂号订单数据
        // 注意：这里我们传入一个很大的pageSize来尝试获取所有数据
        // 如果后端有特定的获取全部数据的接口，可以替换为相应的API调用
        const res = await api.getAppointmentOrders(1, 1000);
        
        console.log('API返回数据:', res);
        
        // 清空原有数据
        this.appointmentOrders = [];
        
        // 检查返回数据是否有效
        if (res && res.code === 200) {
          // 处理不同的数据返回格式
          if (res.data && Array.isArray(res.data)) {
            // 格式1: { code: 200, data: [] }
            this.appointmentOrders = res.data;
          } else if (res.data && res.data.list && Array.isArray(res.data.list)) {
            // 格式2: { code: 200, data: { list: [] } }
            this.appointmentOrders = res.data.list;
          } else {
            console.warn('API返回数据格式不符合预期:', res);
            // 显示错误提示
            uni.showToast({
              title: '数据格式异常',
              icon: 'none'
            });
          }
        } else {
          // API返回错误
          console.error('API返回错误:', res);
          // 显示错误提示
          uni.showToast({
            title: '数据获取失败，请稍后重试',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取预约挂号订单失败:', error);
        // 显示网络错误提示
        uni.showToast({
          title: '网络异常，请检查网络连接',
          icon: 'none'
        });
      } finally {
        this.loading = false;
        console.log('数据加载完成，总数据量:', this.appointmentOrders.length);
      }
    },

    handleBack() {
      uni.navigateBack();
    },

    handleChangePatient() {
      uni.navigateTo({
        url: '/pageMember/setting/patient-list/patient-list'
      });
    },
    
    onShow() {
      console.log('页面显示，加载数据');
      this.loadCurrentPatient();
      this.appointmentOrders = [];
      this.loadAllAppointmentOrders();
      
      // 监听患者变更事件
      uni.$on('patientChanged', (patient) => {
        console.log('患者变更，重新加载数据');
        this.currentPatient = patient;
        this.appointmentOrders = [];  // 清空旧数据
        this.loadAllAppointmentOrders();
      });
    },
    
    onUnload() {
      uni.$off('patientChanged');
    }
  }
}
</script>

<style scoped>
.record-page {
  background: #f5f5f5;
  min-height: 100vh;
}

.patient-info {
  background: #fff;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.record-list {
  height: calc(100vh - 200rpx);
  padding: 0 20rpx;
}

.record-item {
  background: #fff;
  border-radius: 12rpx;
  margin: 20rpx 0;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
}

.department {
  font-weight: bold;
  color: #333;
}

.info-line {
  display: flex;
  align-items: center;
  margin: 15rpx 0;
  color: #666;
}

.info-line uni-icons {
  margin-right: 10rpx;
}

.loading-status {
  text-align: center;
  padding: 30rpx;
  color: #999;
}
</style>